<template>
   <div>
   	<div id="slider" class="mui-slider">
				<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<div class="mui-scroll">
						<a class="mui-control-item mui-active" href="#item1mobile" data-wid="tab-top-subpage-1.html" @click="getAllPicture('all')">
							全部
						</a>
						<a class="mui-control-item" href="#item2mobile" data-wid="tab-top-subpage-2.html">
							家居生活
						</a>
						<a class="mui-control-item" href="#item3mobile" data-wid="tab-top-subpage-3.html">
							摄影设计
						</a>
						<a class="mui-control-item" href="#item4mobile" data-wid="tab-top-subpage-4.html">
							明星美女
						</a>
						<a class="mui-control-item" href="#item5mobile" data-wid="tab-top-subpage-5.html">
							清纯甜美
						</a>
						<a class="mui-control-item" href="#item5mobile" data-wid="tab-top-subpage-5.html">
							古典美女
						</a>
						<a class="mui-control-item" href="#item5mobile" data-wid="tab-top-subpage-5.html">
							摄影学习
						</a>
					</div>
				</div>

			</div>
			<ul>
 			 <router-link v-for="item,i in pictureList" tag='li' :to="'/home/picture/info?id=' + (i+1)">
    			<img v-lazy="'http://129.204.193.180:5000/static/picture/' + item">
    			<div class="info">
    				<h3>范冰冰，1981年9月16日出生于山东青岛</h3>
    				<p>华语影视女演员、制片人、歌手，毕业于上海师范大学谢晋影视艺术学院。1998年主演电视剧《还珠格格》获得广泛关注，2004年凭借冯小刚执导的电影《手机》获得第27届大众电影百花奖最佳女主角。</p>
    			</div>
  			 </router-link>
			</ul>
   </div>
</template>
<script type="text/javascript">
	import mui from '../lib/mui/dist/js/mui.min.js';
	export default {
		data() {
			return {
				pictureList: []
			}
		},
		methods: {
			getAllPicture(kind) {
				this.$http.get('home/picture?kind=' + kind).then(function (data) {
					var reslist = JSON.parse(data.body.resBody.data)
					var dirName = reslist[0]
					reslist.splice(0, 1)
					for(i = 0; i < reslist.length; i++) {
						for(x = 0; x < reslist[i].length; x++){
							reslist[i][x] = dirName[i] + '/' + reslist[i][x]
						}
					}
					for(i = 0; i < reslist.length; i++) {
						for(x = 0; x < reslist[i].length; x++){
							this.pictureList.push(reslist[i][x])
						}
					}
				})
			}
		},
		created() {
			this.getAllPicture('all')
		},
		mounted() {
			mui('.mui-scroll-wrapper').scroll({
			deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
			});
		}
	}
</script>
<style lang="less" scoped>
#slider{
	position: fixed;
	top: 40px;
	background-color: #fff;
	opacity: 0.7;
}
* {
touch-action: pan-y;
}
ul{
	list-style: none;
	padding:30px 10px;
	li{
		margin-bottom: 10px;
		box-shadow: 0px 0px 10px #999;
		position: relative;
	}
	.info{
		position: absolute;
		bottom:0;
		background-color: rgba(0, 0, 0, 0.5);
		max-height: 110px;
		text-align: left;
		h3{font-size: 14px;}
		p{font-size: 12px;text-indent: 2em;}
	}
}
img{
width: 100%;
height: 300px;
vertical-align: middle;
}
</style>